<template>
    <el-form :model="model" label-width="80px" class="mb-3" size="small">
        <el-row :gutter="24">
            <slot />
            <template v-if="showSearch">
                <slot name="show" />
            </template>
            <el-col :span="8" :offset="0">
                <el-form-item>
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="$emit('search')">搜索</el-button>
                        <el-button @click="$emit('reset')">重置</el-button>
                        <el-button type="primary" text @click="showSearch = !showSearch" v-if="hasShowSearch">
                            {{ showSearch ? '收起' : "展开" }}
                            <el-icon>
                                <ArrowUp v-if="showSearch" />
                                <ArrowDown v-else />
                            </el-icon>
                        </el-button>
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script setup lang="ts">
import { ref, useSlots } from 'vue';
defineProps({
    model: Object
})

defineEmits(["search", "reset"])
const showSearch = ref(false)

const slots = useSlots() as Record<string, any>
const hasShowSearch = ref(!!slots.show)
</script>